<template>
  <el-drawer :model-value="show" @close="emit('update:show', false)" size="340px" title="主题配置" append-to-body>
    <div class="drawer-content">
      <el-divider line-style="dashed">
        <span style="color: #4b8977">漫画风 <Magic /> </span>
      </el-divider>
      <br />
      <el-alert type="warning">漫画风开启后色彩一栏的配置将失效哦</el-alert>
      <div class="drawer-item">
        <span class="label">一键漫画风</span>
        <span>
          <el-switch v-model="theme.isComic" active-text="开" inactive-text="关" />
        </span>
      </div>
      <el-divider line-style="dashed">
        <span style="color: #6fbef3"> 色彩 <ColorFilter /> </span>
      </el-divider>
      <div class="drawer-item column">
        <span class="label">主题色</span>
        <!-- <el-color-picker
          v-model="theme.primary"
          :predefine="['#2d8cf0', '#faa500', '#06a17e', '#6954f0', '#f34d37', '#40596b', '#c45656']" /> -->
        <div class="colorlist">
          <span
            class="color"
            :class="{ active: theme.primary === color }"
            :style="{ '--color': color }"
            @click="theme.primary = color"
            v-for="color in primaryColors"></span>
        </div>
      </div>
      <div class="drawer-item column">
        <span class="label">文字色</span>
        <!-- <el-color-picker v-model="theme.text" :predefine="['#333333', '#606266', '#40596b']" /> -->
        <div class="colorlist">
          <span
            class="color"
            :class="{ active: theme.text === color }"
            :style="{ '--color': color }"
            @click="theme.text = color"
            v-for="color in textColors"></span>
        </div>
      </div>
      <div class="drawer-item column">
        <span class="label">背景色</span>
        <!-- <el-color-picker v-model="theme.background" :predefine="['#f6f6f6', '#ffffff']" /> -->
        <div class="colorlist">
          <span
            class="color"
            :class="{ active: theme.background === color }"
            :style="{ '--color': color }"
            @click="theme.background = color"
            v-for="color in bgColors"></span>
        </div>
      </div>
      <br />
      <el-divider line-style="dashed">
        <span style="color: #b37feb">顶部图标 <GamePs /></span>
      </el-divider>
      <div class="drawer-item">
        <span class="label">刷新</span>
        <span>
          <el-switch v-model="theme.showRefresh"></el-switch>
        </span>
      </div>
      <div class="drawer-item">
        <span class="label">锁屏</span>
        <span>
          <el-switch v-model="theme.showLock"></el-switch>
        </span>
      </div>
      <div class="drawer-item">
        <span class="label">搜索</span>
        <span>
          <el-switch v-model="theme.showSearch"></el-switch>
        </span>
      </div>
      <div class="drawer-item">
        <span class="label">消息</span>
        <span>
          <el-switch v-model="theme.showMessage"></el-switch>
        </span>
      </div>
      <div class="drawer-item">
        <span class="label">最大化</span>
        <span>
          <el-switch v-model="theme.showSize"></el-switch>
        </span>
      </div>
      <div class="drawer-item">
        <span class="label">国际化</span>
        <span>
          <el-switch v-model="theme.showIn18"></el-switch>
        </span>
      </div>
      <el-divider line-style="dashed">
        <span style="color: #9b0000">其它配置 <Other /></span>
      </el-divider>
      <div class="drawer-item">
        <span class="label">标签页</span>
        <span>
          <el-switch v-model="theme.showTabs"></el-switch>
        </span>
      </div>
    </div>
    <template #footer>
      <el-button @click="confirm" type="primary">保存配置</el-button>
      <el-button @click="store.reset">恢复默认</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { useThemeStore } from '@/store';
import { ColorFilter, GamePs, Other, Magic } from '@icon-park/vue-next';
import { storeToRefs } from 'pinia';
defineProps({
  show: {
    type: Boolean,
    default: false
  }
});

const primaryColors = ['#197ae9', '#faa500', '#06a17e', '#6954f0', '#f34d37', '#40596b', '#c45656'];
const textColors = ['#303133', '#606266', '#40596b', '#ffffff', '#197ae9'];
const bgColors = ['#fafafc', '#ffffff', '#303133', '#606266', '#000000'];

const emit = defineEmits({
  'update:show': (val: boolean) => true
});

const store = useThemeStore();
const { theme } = storeToRefs(store);

function confirm() {
  store.save();
  emit('update:show', false);
}
</script>

<style scoped lang="scss">
.drawer-content {
  .label {
    font-size: 13px;
  }

  .drawer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    min-height: 50px;
  }
  .drawer-item.column {
    flex-direction: column;

    .colorlist {
      margin-top: 10px;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      gap: 10px;

      .color {
        width: 32px;
        height: 32px;
        border: 3px solid #e8efec;
        cursor: pointer;
        transition: all 200ms ease-in-out;
        border-radius: 4px;
        background-color: var(--color);
      }
      .color:hover,
      .color.active {
        box-shadow: 0 0 15px var(--color);
      }
    }
  }
}
</style>
